<template>
   <div class="PromotionCenter">
      <myHead title="推广中心"></myHead>
      <!-- 头部 -->
      <div class="head">
         <div class="headimg">
            <div class="headimg-left">
               <img :src="this.$store.state.userInfo.avatar" alt="">
               <p>{{this.$store.state.userInfo.nickname}}</p>
            </div>
            <div class="headimg-right">
               <p>
                  <span>可提现金额</span>
                  <span>{{statistics.sum_commission}}</span>
               </p>
               <p @click="jump('extensionWithdrawal')">提现</p>
            </div>
         </div>
         <div class="headbot">
            <div><p>{{statistics.have_withdrawal}}</p><p>已提现佣金</p></div>
            <p class="headfg"></p><div><p>{{statistics.publicity_commission}}</p><p>宣传佣金</p></div><p class="headfg"></p>
            <div><p>{{statistics.share_commission}}</p><p>分享佣金</p></div>
         </div>
      </div>
      <!-- 推广功能部分 -->
      <div class="tuiG-icon">
         <div class="tuiG-item" @click="jump('extensionOrder')">
            <img src="../../../static/img/tgzx001.png" alt="">
            <p>推广订单</p>
         </div>
         <div class="tuiG-item" @click="jump('extensionQRcode')">
            <img src="../../../static/img/tgzx002.png" alt="">
            <p>推广二维码</p>
         </div>
         <div class="tuiG-item" @click="jump('extensionMyTeam')">
            <img src="../../../static/img/tgzx003.png" alt="">
            <p>我的团队</p>
         </div>
      </div>
      <!-- 轮播图 -->
      <div class="lunbo">
         <div class="swiper-container" style="width: 100%;height:.8rem;">
            <div class="swiper-wrapper" style="width: 100%;height:100%">
               <img v-for='el in lunbolist' class="swiper-slide index_swiper_listimg" :src="el.url">
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
         </div>
      </div>
      <div class="fenG"></div>
      <!-- 底部功能 -->
      <div class="bot-item-wrap">
         <div class="bot-item" v-for="(x,y) in botIcon" @click="jump(x.page)">
            <img :src="x.url" alt="">
            <div class="bot-item-icon">
               <p>{{x.text}}</p>
               <img src="../../../static/img/tgzx010.png" alt="">
            </div>
         </div>
      </div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";
    import Swiper from 'swiper';
    import 'swiper/css/swiper.css';
    import qs from "qs";
    export default {
        name: "PromotionCenter",
        components: {
            myHead
        },
        data(){
            return {
                lunbolist:[{url:'../../../static/img/tgzx009.png'},{url:'../../../static/img/tgzx009.png'},{url:'../../../static/img/tgzx009.png'}],
                botIcon:[{text:'收益明细',url:'../../../static/img/tgzx004.png',page:'extensionIncomeDetails'},{text:'提现记录',url:'../../../static/img/tgzx005.png',page:'WithdrawalRecord'},{text:'银行卡',url:'../../../static/img/tgzx006.png',page:'extensionBankCard'}],
                statistics:'', // 头部数据
            }
        },
        created(){
            this.$myAxios('index/user/statistics','post',{
                user_id:this.$myStorage.query('user')
            }).then(res=>{
                var data = res.data;
                if (data.statistics) {
                    this.statistics = data.statistics;
                }else {
                    this.statistics = {
                        sum_commission:0,
                        have_withdrawal:0,
                        publicity_commission:0,
                        share_commission:0
                    }
                }
            });
        },
        mounted() {
            //    这里配置swiper轮播图
            new Swiper('.swiper-container', {
                loop: true, // 循环模式选项
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                autoplay:{
                    delay:3000
                }
            });
        },
        methods:{
            jump(page){
                this.$router.push({
                    name:page
                })
            }

        }
    }
</script>

<style scoped>
   .PromotionCenter {
      padding-top: .5rem;
   }

   .head {
      width: 100%;
      background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
      padding: .1rem 0;
   }
   .headimg {
      display: flex;
      flex-flow: row;
      align-items: center;
      padding-left: .15rem;
      justify-content: space-between;
      margin-bottom: .3rem;
   }
   .headimg-left {
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .headimg-left>img {
      width: .46rem;
      height: .46rem;
      border-radius: 50%;
      margin-right: .1rem;
   }
   .headimg-left>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:bold;
      color: #FFFFFF;
   }
   .headimg-right {
      width: 43%;
      box-sizing: border-box;
      display: flex;
      flex-flow: row;
      align-items: center;
      padding-right: .15rem;
      justify-content: space-between;
   }
   .headimg-right>p:nth-child(1) {
      display: flex;
      flex-flow: column;
      color: #FFFFFF;
      font-family:PingFang SC;
      font-weight:500;
   }
   .headimg-right>p:nth-child(1)>span:nth-child(1) {
      font-size: .14rem;
   }
   .headimg-right>p:nth-child(1)>span:nth-child(2) {
      font-size: .18rem;
   }
   .headimg-right>p:nth-child(2) {
      width:.46rem;
      height:.26rem;
      border:.01rem solid rgba(255,255,255,1);
      border-radius:.05rem;
      font-size:.14rem;
      color: #FFFFFF;
      font-family:PingFang SC;
      font-weight:500;
      text-align: center;
      line-height: .26rem;
   }

   .headbot {
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .headbot>div {
      width: calc(100% / 3);
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-between;
   }
   .headbot>div>p {
      font-size:.13rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #FFFFFF;
      line-height: .26rem;
   }
   .headbot>div>p:nth-child(1) {
      font-size: .14rem;
   }
   .headbot>div>p:nth-child(2) {
      font-weight: 400;
   }
   .headfg {
      width: .01rem;
      height: .23rem;
      background-color: #FFFFFF;
   }
   .tuiG-icon {
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .tuiG-item {
      width: calc(100% / 3);
      height: .95rem;
      box-sizing: border-box;
      padding: .2rem 0;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-between;
   }
   .tuiG-item>img {
      width: .2rem;
      max-height: .2rem;
      margin-bottom: .1rem;
   }
   .tuiG-item>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #333333;
   }

   .fenG {
      width: 100%;
      height: .05rem;
      background-color: #E5E5E5;
   }

   .bot-item-wrap {

   }
   .bot-item {
      display: flex;
      flex-flow: row;
      align-items: center;
      padding: 0 .15rem;
   }
   .bot-item>img {
      width: .2rem;
      max-height: .2rem;

   }
   .bot-item-icon {
      width: calc(100% - .3rem);
      height: .5rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: .01rem solid #F5F5F5;
      box-sizing: border-box;
      padding-left: .1rem;
   }
   .bot-item-icon>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #141414;
   }
   .bot-item-icon>img {
      width: .05rem;
      height: .09rem;
   }
   .lunbo {
      width: 95%;
      height: .8rem;
      margin: 0 auto .15rem;
      border-radius: .1rem;
      overflow: hidden;
   }
   .lunbo>div {
      border-radius: .1rem;
   }
   /* 轮播图小圆点颜色改变 */
   >>> .swiper-pagination-bullets .swiper-pagination-bullet-active {
      background: rgba(252, 216, 144, .68) !important;
   }
   >>> .swiper-pagination-bullets {
      bottom: 0;
   }
   .bot-item-icon:nth-last-child(1) {
      border: none;
   }
</style>